<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title Page</title>

    <!-- Bootstrap CSS -->
    <link href="./lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>
    <div id="app" class="container-fluid">


        <div class="jumbotron">
            logs...
        </div>
        <div class="row">
            <div class="col-md-3">


                <div class="list-group">
                    <a href="#" @click="fnSelectCate(item)" class="list-group-item" v-for="(item, index) in cateList"
                        :key="index">{{item.title}}</a>

                </div>


            </div>
            <div class="col-md-9">


                <button type="button" @click="fnShowAddArticleModal()" class="btn btn-success">add article</button>

                <table class="table table-striped table-condensed table-hover">

                    <tbody>
                        <tr v-for="(item, index) in fileList" :key="index">
                            <td>
                                {{item.ctime}}
                                
                                <a class="btn btn-link" target="_blank" :href="'articleDetail.html?sid='+ item.sid" role="button">{{item.title}}</a>
                                

                            </td>
                            <td>
                                modify
                            </td>

                        </tr>


                    </tbody>
                </table>
            </div>
        </div>


        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">操作</h4>
                    </div>
                    <div class="modal-body">

                        
                        <form action="" method="POST" role="form">
                        
                        
                            <div class="form-group">
                                <label for="">title</label>
                                <input type="text" class="form-control" v-model="article.title">
                            </div>

                        </form>
                        
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" @click="fnAddArticle()" class="btn btn-primary">确定</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>



    <!-- jQuery -->
    <script src="./lib/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="./lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>

</html>


<script src="./lib/vue.min.js"></script>

<script src="./global.js"></script>

<script>

    var vm = new Vue({
        el: '#app',
        data: {
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000",

            selectCateId: '',
            article: {

                cateId: "",
                title: 'new article',
            },

            cateList: [
                ""
            ],
            fileList: [
                {
                    title: "nam3"
                },
                

            ]
        },
        methods: {
            details: function () {
                return this.site + " - 学的不仅是技术，更是梦想！";
            },

            fnSelectCate(item) {

                this.article.cateId = item.sid;
                this.selectCateId = item.sid;
                this.getArticleList();
            },
            getCateList() {

                var that = this;
                fetch(`${config.remoteUrl}/noteCates`)
                    .then(function (response) {
                        return response.json();
                    })
                    .then(function (myJson) {
                        if (myJson.code == 0) {
                            that.cateList = myJson.dat.content;
                        }
                    });
            },
            getArticleList() {

                var that = this;
                var cateId = this.selectCateId;
                fetch(`${config.remoteUrl}/noteArticles?size=1000&cateId=${this.selectCateId}&sort=ctime,desc`)
                    .then(function (response) {
                        return response.json();
                    })
                    .then(function (myJson) {
                        if (myJson.code == 0) {
                            that.fileList = myJson.dat.content;
                        }
                    });
            },
            fnShowAddArticleModal() {

                if (!this.selectCateId) {

                    alert('请选择分类');
                    return;
                }

        
                $('#myModal').modal('show');

            },
            fnAddArticle(){
                console.log(this.article);

                var that = this;
                fetch(`${config.remoteUrl}/noteArticles`, {
                    body: JSON.stringify(this.article),
                    method: 'POST',
                    mode: 'cors',
                    headers: {
                        'content-type': 'application/json',
                    }
                
                })
                    .then(function (response) {
                        return response.json();
                    })
                    .then(function (myJson) {
                        if (myJson.code == 0) {
                            $('#myModal').modal('hide');
                            that.getArticleList();
                        }
                    });

                
            }
        },
        mounted() {
            this.getCateList();
            this.getArticleList();
        },
    });

</script>